<script setup>
import {
  onMounted,
  nextTick,
  ref,
  reactive,
  watch,
  computed,
  watchEffect,
} from "vue";
import {
  getForecast,
  getTide,
  login,
  getTide24,
  getTideMonth,
  getDisaster,
  getDisasterByYear,
  seriesQueriesNew,
  searchNumberForecastByType,
  determinePngExist,
  getWarning,
  getUserPermission,
  getAllDepartment,
  searchAllPnt,
  getViewByTypeAndDepartId,
  getNewNumberForecastByTypeAndDepart,
} from "../network/net.js";
import {
  initMap,
  addForecastLayer,
  removeForecastLayer,
  removeForecastLayerL,
  thisLayerG,
  thisLayerL,
  pointInfo,
} from "../components/module/Class_Map.js";
import Config from "../components/module/Class_Map.js";
import icon1 from "../assets/img/icon-图层.png";
import iconActive1 from "../assets/img/icon-图层-1.png";
import icon2 from "../assets/img/icon-定位.png";
import iconActive2 from "../assets/img/icon-定位-1.png";
import icon3 from "../assets/img/icon-缩小.png";
import iconActive3 from "../assets/img/icon-缩小-1.png";
import icon4 from "../assets/img/icon-放大.png";
import iconActive4 from "../assets/img/icon-放大-1.png";
import iconTime from "../assets/img/icon-时间.png";
import iconWheather from "../assets/img/icon-weather.png";
import iconWu from "../assets/img/icon-雾.png";
import iconHaifeng from "../assets/img/icon-海风.png";
import iconHailang from "../assets/img/icon-海浪.png";
import iconHailiu from "../assets/img/icon-海流.png";
import iconSz from "../assets/img/icon-数值法.png";
import iconActiveSz from "../assets/img/icon-数值法-1.png";
import iconLi from "../assets/img/icon-粒子法.png";
import iconActiveLi from "../assets/img/icon-粒子法-1.png";
import iconJian from "../assets/img/icon-箭头法.png";
import iconActiveJian from "../assets/img/icon-箭头法-1.png";
import iconFeng from "../assets/img/icon-风.png";
import iconLang from "../assets/img/icon-浪.png";
import iconTian from "../assets/img/icon-tianqi.png";
import iconWaveNo from "../assets/img/wave-no.png";
import iconFbcNo from "../assets/img/fbc-no.png";
import iconTide from "../assets/img/潮位站.png";
// import iconTime from '../assets/img/icon-时间.png'
import tideData from "../assets/json/tide.json";
import * as echarts from "echarts";
import { reactify, useDraggable } from "@vueuse/core";
// import Config from '../components/mapInfoObj/mapConfig.js'
// import { removeOtherLayer, addnoseaLayer, removenoseaLayer } from '../components/mapInfoObj/initMap.js'
import { formatTime, addHours } from "../utils/cTime.js";
import { ElMessage } from "element-plus";
import tideMonth from "../assets/json/tideMonth.json";
import TyphoonForecast from "../components/TyphoonForecastWeb/index.js";
import chun from "../stores/chun.js";
import iconGantan from "../assets/img/感叹号.png";
import iconWaveLan from "../assets/img/wave_lan_simple.png";
import iconWaveHuang from "../assets/img/wave_huang_simple.png";
import iconWaveHong from "../assets/img/wave_hong_simple.png";
import iconWaveCheng from "../assets/img/wave_cheng_simple.png";
import iconWaveInfo from "../assets/img/wave_info_simple.png";
import iconStormLan from "../assets/img/fbc_lan_simple.png";
import iconStormHuang from "../assets/img/fbc_huang_simple.png";
import iconStormHong from "../assets/img/fbc_hong_simple.png";
import iconStormCheng from "../assets/img/fbc_cheng_simple.png";
import iconStormInfo from "../assets/img/fbc_info_simple.png";
import iconBofang from "../assets/img/bofang.png";
import iconZanting from "../assets/img/zanting.png";
// 综合预报,数值预报,潮汐预报,灾害预警,台风路径
import iconZonghe from "../assets/img/icon-综合预报.png";
import iconShuzhi from "../assets/img/icon-数值预报.png";
import iconChaoxi from "../assets/img/icon-潮汐预报.png";
import iconZaihai from "../assets/img/icon-灾害预警.png";
import iconTaifeng from "../assets/img/icon-台风路径.png";
import iconZongheActive from "../assets/img/icon-综合预报-1.png";
import iconShuzhiActive from "../assets/img/icon-数值预报-1.png";
import iconChaoxiActive from "../assets/img/icon-潮汐预报-1.png";
import iconZaihaiActive from "../assets/img/icon-灾害预警-1.png";
import iconTaifengActive from "../assets/img/icon-台风路径-1.png";
import iconClose from "../assets/img/tuichu.png";

import iconTl from "../assets/img/台风图例.png";
import iconTf from "../assets/img/台风.png";
import iconTfActive from "../assets/img/台风-1.png";
import iconTlActive from "../assets/img/台风图例-1.png";
import iconXia from "../assets/img/下拉.png";
import iconShang from "../assets/img/上拉.png";
import lineCircle from "../assets/img/arrow-up.png";

import TimeStep from "../components/myel/TimeStep.vue";
import Menu from "../components/myel/Menu.vue";
import KaiGuan from "../components/myel/KaiGuan.vue";
import ZonghePop from "../components/myel/ZonghePop.vue";
import ChaoxiPop from "../components/myel/ChaoxiPop.vue";
import JbPop from "../components/myel/JbPop.vue";
import FloatPopCom from '@/components/myel/FloatPopCom.vue'
import Tools from "../components/myel/Tools.vue";
import ChartPop from "../components/myel/ChartPop.vue";
import { smInfo, activeMenu, chartInfo, bmName, smPngInfo, smRange } from "../stores/chun.js";
import {
  // bmInfo,
  // bm,
  waveValue,
  tideValue,
  systemTitle,
} from "../stores/chun.js";
import linesData from "../assets/json/lines.json";

// router
import { useRouter } from "vue-router";
import { isMeasure } from "../stores/chun.js";


let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");

bm = ref(bm);
bmInfo = ref(JSON.parse(bmInfo));
bmName.value = bm.value;

const router = useRouter();
const url_go = import.meta.env.VITE_backurl_SHUMO;
// const bm = ref(bmInfo.value[0]?.name);

let token = sessionStorage.getItem("token");

let map = null;
const alarmYears = ref([]);
let warningValue = ref();
const chartRange = ref([0, 72]);
const checkLogin = () => {

  let token = sessionStorage.getItem("token");
  if (!token || bmInfo?.value) {

    router.push("/login");
  }
}

onMounted(() => {


  getWarning().then((res) => {
    if (res.data.code == 200 && res.data?.data?.value) {
      warningValue.value = res.data.data.value;
    }
  });
  tableData.value = [];
  tideMonth.data.forEach((item) => {
    let dateArr = item.date.split("-");
    tableData.value.push({
      date: dateArr[1] + "-" + dateArr[2],
      timeHigh: item.timeHigh1,
      tideHigh: item.tideHigh1,
      timeLow: item.timeLow1,
      tideLow: item.tideLow1,
    });
    tableData.value.push({
      date: dateArr[1] + "-" + dateArr[2],
      timeHigh: item.timeHigh2,
      tideHigh: item.tideHigh2,
      timeLow: item.timeLow2,
      tideLow: item.tideLow2,
    });
  });

  // getHomeAlarm()
  initMap();
  // zoom设为10
  // Config.mapObj.map.setZoom(10);

  // 最小缩放级别为8
  // add123();
  let year = new Date().getFullYear();
  for (let i = 0; i < 5; i++) {
    alarmYears.value.push({
      value: year - i,
      label: year - i + "年",
    });
  }

  alarmYear.value = alarmYears.value[0].value;
  date.value = formatTime(new Date()).split(" ")[0];

  Config.mapObj.map.createPane("pane1");
  Config.mapObj.map.getPane("pane1").style.zIndex = 400;

  // 30.422335935664595, 120.94423155357681
  // L.semiCircle([30.422335935664595, 120.94423155357681], {
  //   radius: 10000, //单位是米
  //   startAngle: 10,
  //   stopAngle: 205,
  //   // 层级
  //   pane: "pane1",
  //   // 无填充
  //   fill: false,
  //   // 黑色
  //   color: "black",
  //   // 粗细
  //   weight: 1,
  // }).addTo(Config.mapObj.map);

  // areaLines.area1.arc = L.polyline(linesData.lines1, {
  //   color: "black",
  //   weight: 2,
  //   pane: "pane1",
  // })
  //   .addTo(Config.mapObj.map);

  // 缓冲区
  // areaLines.area1.arc = L.polyline(linesData.lines1, {
  //   // color: "black",
  //   // /透明
  //   color: "transparent",
  //   weight: 50,
  //   pane: "pane1",
  // }).on('mouseover', function (e) {
  //   // 获取区域中心点
  //   let center = e.target.getBounds().getCenter();
  //   let popup = L.popup()
  //     // .setLatLng(e.latlng)
  //     .setLatLng(center)
  //     .setContent(
  //       `<div style="font-size: 14px; color: #000; text-align: center;">1厂工程海域</div>`
  //     )
  //     .openOn(Config.mapObj.map);

  // })
  //   .on('mouseout', function (e) {
  //     Config.mapObj.map.closePopup();
  //   })
  //   .addTo(Config.mapObj.map);
  // areaLines.area1.line = L.polyline(
  //   [
  //     [30.422335935664595, 120.94423155357681],
  //     [30.511227886318157, 120.96042252070848],
  //   ],
  //   {
  //     color: "black",
  //     weight: 2,
  //     pane: "pane1",
  //   }
  // ).addTo(Config.mapObj.map);

  // areaLines.area1.line = L.polyline(
  //   [
  //     [30.422335935664595, 120.94423155357681],
  //     [30.511227886318157, 120.96042252070848],
  //   ],
  //   {
  //     // color: "black",
  //     color: "transparent",
  //     weight: 40,
  //     pane: "pane1",
  //   }
  // ).on('mouseover', function (e) {
  //   // 获取区域中心点
  //   let center = e.target.getBounds().getCenter();
  //   let popup = L.popup()
  //     // .setLatLng(e.latlng)
  //     .setLatLng(center)
  //     .setContent(
  //       `<div style="font-size: 14px; color: #000; text-align: center;">1号、3号工程海域</div>`
  //     )
  //     .openOn(Config.mapObj.map);

  // })
  //   .on('mouseout', function (e) {
  //     Config.mapObj.map.closePopup();
  //   })
  //   .addTo(Config.mapObj.map);

  // areaLines.area2.arc = L.polyline(linesData.lines2, {
  //   color: "#F5A623",
  //   weight: 2,
  //   pane: "pane1",
  // }).addTo(Config.mapObj.map);

  // 缓冲区
  // areaLines.area2.arc = L.polyline(linesData.lines2, {
  //   // color: "#F5A623",
  //   color: "transparent",
  //   weight: 41,
  //   pane: "pane1",
  // }).on('mouseover', function (e) {
  //   // 获取区域中心点
  //   let center = e.target.getBounds().getCenter();
  //   let popup = L.popup()
  //     // .setLatLng(e.latlng)
  //     .setLatLng(center)
  //     .setContent(
  //       `<div style="font-size: 14px; color: #000; text-align: center;">2厂工程海域</div>`
  //     )
  //     .openOn(Config.mapObj.map);

  // })
  //   .on('mouseout', function (e) {
  //     Config.mapObj.map.closePopup();
  //   })
  //   .addTo(Config.mapObj.map);

  // areaLines.area2.line = L.polyline(
  //   [
  //     [30.422335935664595, 120.94423155357681],
  //     [30.340901500942653, 120.90016339689983],
  //   ],
  //   {
  //     color: "#F5A623",
  //     weight: 2,
  //     pane: "pane1",
  //   }
  // ).addTo(Config.mapObj.map);

  // areaLines.area2.line = L.polyline(
  //   [
  //     [30.422335935664595, 120.94423155357681],
  //     [30.340901500942653, 120.90016339689983],
  //   ],
  //   {
  //     // color: "#F5A623",
  //     color: "transparent",
  //     weight: 40,
  //     pane: "pane1",
  //   }
  // ).on('mouseover', function (e) {
  //   // 获取区域中心点
  //   let center = e.target.getBounds().getCenter();
  //   let popup = L.popup()
  //     // .setLatLng(e.latlng)
  //     .setLatLng(center)
  //     .setContent(
  //       `<div style="font-size: 14px; color: #000; text-align: center;">2厂工程海域</div>`
  //     )
  //     .openOn(Config.mapObj.map);

  // })
  //   .on('mouseout', function (e) {
  //     Config.mapObj.map.closePopup();
  //   })
  //   .addTo(Config.mapObj.map);

  // 获取权限
  getUserPermission(token).then((res) => {
    if (res.data.data.includes("system")) {
      // 拥有后台权限
    }
  });
});

let areaLines = {
  area1: {
    line: null,
    arc: null,
  },
  area2: {
    line: null,
    arc: null,
  },
};

const nvs = [
  {
    title: "综合预报",
    icon: iconZongheActive,
    iconActive: iconZonghe,
  },
  {
    title: "数值预报",
    icon: iconShuzhi,
    iconActive: iconShuzhiActive,
  },
  {
    title: "潮位预报",
    icon: iconChaoxi,
    iconActive: iconChaoxiActive,
  },
  {
    title: "灾害警报",
    icon: iconZaihai,
    iconActive: iconZaihaiActive,
  },
  {
    title: "台风路径",
    icon: iconTaifeng,
    iconActive: iconTaifengActive,
  },
];
const activeNv = ref("综合预报");
const activeHight = ref(350);
const activeHightBq = ref(0);
const isshowArr = ref([true, true, true]);
const handleFold = (item, idx) => {
  isshowArr.value[idx] = !isshowArr.value[idx];
};
const showRight = ref(false);

const getForecastDate = (hour) => {
  let startDate = addHours(new Date(), hour - 24);
  let endDate = addHours(new Date(), hour);
  let d1 = startDate.getDate();
  let d2 = endDate.getDate();
  if (d1 < 10) {
    d1 = "0" + d1;
  }
  if (d2 < 10) {
    d2 = "0" + d2;
  }
  // return `${d1}日${startDate.getHours()}时 - ${d2}日${endDate.getHours()}时`
  return `${d1}日08时 - ${d2}日08时`;
  // return formatTime(startDate).split(' ')[0] + ' 00:00' + ' ~ ' + formatTime(endDate).split(' ')[0] + ' 00:00'
};
const replaceMap = {
  NE: "东北",
  NW: "西北",
  SE: "东南",
  SW: "西南",
  N: "北",
  S: "南",
  E: "东",
  W: "西",
  // '-': '到',
  "→": "转",
  "↑": "增大到",
  "↓": "减小到",
  // '▽': '阵风',
};

const handleBm = (item) => {
  bm.value = item.name;
  bmName.value = item.name;
  // bmInfo.value = item;
  // Config.mapObj.map.removeLayer(thisLayerG);
  // Config.mapObj.map.removeLayer(thisLayerL);
  // add123();
};

const replaceStr = (str, dw) => {
  if (!str) {
    return "";
  }
  // 获取str中 - 的所有位置
  let arr = [];
  for (let i = 0; i < str.length; i++) {
    if (str[i] == "-") {
      arr.push(i);
    }
  }
  // arr倒叙
  arr = arr.reverse();
  if (dw == "级") {
    // 正则匹配4▽5-6这类的字符串
    str = str.replace(/(\d+)(▽)(\d+)(-)(\d+)/g, "$1级阵风$3到$5级");

    // 正则匹配3-4▽5这类的字符串
    str = str.replace(/(\d+)(-)(\d+)(▽)(\d+)/g, "$1到$3级阵风$5级");

    // 正则匹配4▽5这类的字符串
    str = str.replace(/(\d+)(▽)(\d+)/g, "$1级阵风$3级");

    // 正则匹配4-5这类的字符串
    str = str.replace(/(\d+)(-)(\d+)/g, "$1到$3级");
  }

  if (dw == "米") {
    // 正则匹配0.3-0.6这类的字符串
    str = str.replace(/(\d+)(\.)(\d+)(-)(\d+)(\.)(\d+)/g, "$1.$3到$5.$7米");
  }

  let newStr = str;
  for (let key in replaceMap) {
    newStr = newStr.replace(new RegExp(key, "g"), replaceMap[key]);
  }
  return newStr;
};

// 地图工具4个按钮
const tools = [
  // {
  //     icon: icon1,
  //     iconActive: iconActive1,
  // },
  {
    title: "定位",
    icon: icon2,
    iconActive: iconActive2,
  },
  {
    title: "缩小",
    icon: icon3,
    iconActive: iconActive3,
  },
  {
    title: "放大",
    icon: icon4,
    iconActive: iconActive4,
  },
  {
    title: "台风",
    icon: iconTf,
    iconActive: iconTfActive,
  },
  {
    title: "图例",
    icon: iconTl,
    iconActive: iconTlActive,
  },
];

const dayInfo = ref([
  {
    icon: iconTime,
    title: "日期",
    value: "2021-08-12",
  },
  {
    icon: iconWheather,
    title: "天气",
    value: "多云",
  },
  {
    icon: iconWu,
    title: "雾况",
    value: "5km",
  },
]);

const forecastData = ref([
  {
    seaAreaName: "",
    date: "",
    wheather: "",
    fog: "",
    hour: "24",
    windSpeed: "",
    windDirection: "",
    waveHeight: "",
    waveDirection: "",
  },
  {
    seaAreaName: "",
    date: "",
    wheather: "",
    fog: "",
    hour: "24",
    windSpeed: "",
    windDirection: "",
    waveHeight: "",
    waveDirection: "",
  },
]);

const activeShumo = ref("");
const shumoInfo = ref([
  {
    icon: iconHaifeng,
    title: "海风",
    layer: "windLayer",
    type: "wind",
  },
  {
    icon: iconHailang,
    title: "海浪",
    layer: "waveLayer",
    type: "wave",
  },
  {
    icon: iconHailiu,
    title: "海流",
    layer: "currentLayer",
    type: "current",
  },
]);
const handleShumo = (item) => {
  isPop.value = false;
  isShowChart.value = false;
  if (activeShumo.value == item.title) {
    activeShumo.value = "";
    removeForecastLayer();
    removeForecastLayerL();
    isShowLegend.value = false;
    // 移除海风时的边界线
    if (boundaryLineLayer1) {
      if (Config.mapObj.map.hasLayer(boundaryLineLayer1)) {
        Config.mapObj.map.removeLayer(boundaryLineLayer1);
      }
      boundaryLineLayer1 = null;
    }
    return;
  }
  activeShumo.value = item.title;
};
// 图例控制
let boundaryLineLayer1 = null;
const isShowLegend = ref(false);
const legendArrData = ref([]);
const isShowChart = ref(false);
const day3 = reactive({
  startDateTime: formatTime(new Date()).split(" ")[0] + " 00:00",
  endDateTime: formatTime(addHours(new Date(), 72)).split(" ")[0] + " 00:00",
});

// 地图工具
const handleTool = (idx) => {
  currentTfPop.value = "";
  currentTfPop.value = "";
  if (idx == 0) {
    Config.mapObj.map.setView([30.245361, 120.962109], 10);
  } else if (idx == 1) {
    Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() - 1);
  } else if (idx == 2) {
    Config.mapObj.map.setZoom(Config.mapObj.map.getZoom() + 1);
  } else if (idx == 3) {
    chun.isTl = false;
    chun.isOpen = !chun.isOpen;
    if (chun.isOpen) {
      currentTfPop.value = "台风";
      if (chun.isOpen) {
        currentTfPop.value = "台风";
      }
    }
  } else {
    chun.isTl = !chun.isTl;
    chun.isOpen = false;
    if (chun.isTl) {
      currentTfPop.value = "图例";
      if (chun.isTl) {
        currentTfPop.value = "图例";
      }
    }
  }
};

// 潮汐部分
const station = ref("1");
const stations = ref([
  {
    value: "1",
    label: "逐时潮位",
  },
  {
    value: "2",
    label: "月高低潮",
  },
]);
const date = ref("");
const timeHour = ref(0);
const marks = {
  0: "0h",
  24: "24h",
  48: "48h",
  72: "72h",
};

const tableData = ref([
  {
    date: "08-12",
    timeHigh: "12:00",
    tideHigh: "250",
    timeLow: "18:00",
    tideLow: "-182",
  },
]);

const getDqDate = () => {
  if (station.value == 1) {
    // 获取时间范围 06月01日 00时 - 06月02日 00时，当前日期到24小时后
    let dateF1 = formatTime(new Date());
    let dateF2 = formatTime(addHours(new Date(), 23));
    let dateArr1 = dateF1.split(" ")[0].split("-");
    let dateArr2 = dateF2.split(" ")[0].split("-");
    let hour1 = dateF1.split(" ")[1].split(":")[0];
    let hour2 = dateF2.split(" ")[1].split(":")[0];
    return `${dateArr1[1]}月${dateArr1[2]}日${hour1}时-${dateArr2[1]}月${dateArr2[2]}日${hour2}时`;
  } else {
    // 返回例如2024年06月的字符串
    let date = formatTime(new Date()).split(" ")[0];
    let dateArr = date.split("-");
    return `${dateArr[0]}年${dateArr[1]}月`;
  }
};

const tipFormatter = (e) => {
  return formatTime(addHours(`${date.value} 00:00`, e)).split(":")[0];
};

// 综合预报部分
const seaAreaActive = ref(1);
const handleSea = () => {
  seaAreaActive.value = Math.abs(seaAreaActive.value - 1);
};

// 数值预报部分========================================================

const getChDate = (date) => {
  let dateArr = date.split(" ")[0].split("-");
  return `${dateArr[1]}月${dateArr[2]}日 00时`;
};

const getChDate1 = (date) => {
  let dateArr = date.split(" ")[0].split("-");
  let hour = date.split(" ")[1].split(":")[0];
  return `${dateArr[1]}月${dateArr[2]}日 ${hour}时`;
};

const activeType = ref("海浪");

const lizis = ref([
  {
    icon: iconLi,
    iconActive: iconActiveLi,
    title: "粒子法",
    isShow: false,
  },
  {
    icon: iconSz,
    iconActive: iconActiveSz,
    title: "数值法",
    isShow: false,
  },
  {
    icon: iconJian,
    iconActive: iconActiveJian,
    title: "箭头法",
    isShow: false,
  },
]);
const activeLi = ref([]);

const handleLizi = (item) => {
  if (activeLi.value.includes(item.title)) {
    activeLi.value = activeLi.value.filter((i) => i != item.title);
  } else {
    activeLi.value.push(item.title);
  }
};

// 16方向划分
const angleMap = [
  {
    name: "北东北",
    enName: "NNE",
    value: [11.25, 33.75],
  },
  {
    name: "东北",
    enName: "NE",
    value: [33.75, 56.25],
  },
  {
    name: "东东北",
    enName: "ENE",
    value: [56.25, 78.75],
  },
  {
    name: "东",
    enName: "E",
    value: [78.75, 101.25],
  },
  {
    name: "东东南",
    enName: "ESE",
    value: [101.25, 123.75],
  },
  {
    name: "东南",
    enName: "SE",
    value: [123.75, 146.25],
  },
  {
    name: "南东南",
    enName: "SSE",
    value: [146.25, 168.75],
  },
  {
    name: "南",
    enName: "S",
    value: [168.75, 191.25],
  },
  {
    name: "南西南",
    enName: "SSW",
    value: [191.25, 213.75],
  },
  {
    name: "西南",
    enName: "SW",
    value: [213.75, 236.25],
  },
  {
    name: "西西南",
    enName: "WSW",
    value: [236.25, 258.75],
  },
  {
    name: "西",
    enName: "W",
    value: [258.75, 281.25],
  },
  {
    name: "西西北",
    enName: "WNW",
    value: [281.25, 303.75],
  },
  {
    name: "西北",
    enName: "NW",
    value: [303.75, 326.25],
  },
  {
    name: "北西北",
    enName: "NNW",
    value: [326.25, 348.75],
  },
  // {
  //     name :'北',
  //     enName : 'N',
  //     value: [348.75, 11.25]
  // }
];

const angleMapWind = [
  {
    name: "北东北",
    enName: "NNE",
    value: [11.25, 33.75],
  },
  {
    name: "东北",
    enName: "NE",
    value: [33.75, 56.25],
  },
  {
    name: "东东北",
    enName: "ENE",
    value: [56.25, 78.75],
  },
  {
    name: "东",
    enName: "E",
    value: [78.75, 101.25],
  },
  {
    name: "东东南",
    enName: "ESE",
    value: [101.25, 123.75],
  },
  {
    name: "东南",
    enName: "SE",
    value: [123.75, 146.25],
  },
  {
    name: "南东南",
    enName: "SSE",
    value: [146.25, 168.75],
  },
  {
    name: "南",
    enName: "S",
    value: [168.75, 191.25],
  },
  {
    name: "南西南",
    enName: "SSW",
    value: [191.25, 213.75],
  },
  {
    name: "西南",
    enName: "SW",
    value: [213.75, 236.25],
  },
  {
    name: "西西南",
    enName: "WSW",
    value: [236.25, 258.75],
  },
  {
    name: "西",
    enName: "W",
    value: [258.75, 281.25],
  },
  {
    name: "西西北",
    enName: "WNW",
    value: [281.25, 303.75],
  },
  {
    name: "西北",
    enName: "NW",
    value: [303.75, 326.25],
  },
  {
    name: "北西北",
    enName: "NNW",
    value: [326.25, 348.75],
  },
  {
    name: "北",
    enName: "NNW",
    value: [348.75, 360],
  },
  {
    name: "北",
    enName: "NNW",
    value: [0, 11.25],
  },
  // {
  //     name :'北',
  //     enName : 'N', 
  //     value: [348.75, 11.25]
  // }
];
const getAngle = (angle, type) => {
  let value = angle.split(" ")[0];

  if (type == "海浪") {
    let value1 =
      360 - (parseFloat(angle) + 90) > 0
        ? (360 - (parseFloat(angle) + 90)) % 360
        : 360 - (parseFloat(value) + 90) + 360;
    value = value1.toFixed(2);
  }
  let angleName = "";
  if (type == "海风正" || type == "海风") {
    angleMapWind.forEach((item) => {
      if (value >= item.value[0] && value < item.value[1]) {
        angleName = item.name;
      }
    });
  } else {
    angleMap.forEach((item) => {
      if (value >= item.value[0] && value < item.value[1]) {
        angleName = item.name;
      }
    });
  }

  if (angleName == "") {
    angleName = "北";
  }
  return angleName;
};

// let shumoT = '';
const getLayerObj = (shumoT, params, pngName) => {
  let ncDirectory = bmInfo.value?.find(
    (item) => item.name == bm.value
  ).ncDirectory;
  return {
    wind: {
      url: `${url_go}${ncDirectory}/wind/${shumoT}/${params.pngName}`,
      range: {
        // scale_lon: 0.2,
        // scale_lat: 0.2,
        // scale: 0.2,
        // startLat: 42.43425,
        // endLat: 11.13321,
        // startLon: 110.13321,
        // endLon: 134.22896,
        // width: 122,
        // height: 156,
        ...params
      },
    },
    wave: {
      url: `${url_go}${ncDirectory}/wave/${shumoT}/${params.pngName}`,
      range: {
        // scale_lon: 0.04921,
        // scale_lat: 0.04949,
        // scale: 0.05,
        // startLat: 33.70419,
        // endLat: 27.666,
        // startLon: 118.30423,
        // endLon: 124.16101,
        // width: 119,
        // height: 122,
        ...params
      },
      // 样例测试
      // url: `/wave-png/wave_20240910161746.png`,
      // range: {
      //   scale_lon: 0.005,
      //   scale_lat: 0.005,
      //   scale: 0.005,
      //   startLat: 29.6,
      //   endLat: 28.4,
      //   startLon: 121.4,
      //   endLon: 122.6,
      //   width: 240,
      //   height: 241,
      // },
    },
    cuerent: {
      url: `${url_go}${ncDirectory}/current/${shumoT}/${params.pngName}`,
      // url: `${url_go}${ncDirectory}/current/2024092417/${pngName}`,
      // 2024092417
      // public下面的ttt.png
      // url: `/ttt.png`,
      range: {
        // scale_lon: 0.024998,
        // scale_lat: 0.02492,
        // scale: 0.025,
        // startLat: 33.26254,
        // endLat: 28.72649,
        // startLon: 120.0568,
        // endLon: 123.5066,
        // width: 138,
        // height: 182,
        ...params
      },
    },
  };
};

let lastShumo = "";
let smDate = ref("");

const layerMap = {
  海风: 0,
  海风粒子: 0,
  海浪: 0,
  海流: 0,
  海流粒子: 0,
};

const layerToMap = {
  windLayer: "wind",
  waveLayer: "wave",
  currentLayer: "current",
};

const popInfo = reactive({
  position: "",
  time: "",
  value: "",
  angle: "",
  label: ["", ""],
  name: "",
});
const isPop = ref(false);
const style = reactive({
  left: "20px",
  top: "20px",
});

const popInfo3 = reactive({
  position: "",
  waveHeight: "",
  waveDirection: "",
  windSpeed: "",
  windDirection: "",
  currentSpeed: "",
  currentDirection: "",
  name: "",
});
// 地图上的点击弹窗
const handleMapSz = async (e, name) => {
  if (isMeasure.value) {
    return;
  }
  if (
    !isClick.value ||
    !smInfo.activeShumo?.title ||
    activeMenu.value?.title == "台风路径" ||
    activeMenu.value?.title == "潮位预报"
  ) {
    return;
  }
  popInfo.name = "";
  let { x, y } = e;

  // // 转为经纬度
  let latlng = Config.mapObj.map.containerPointToLatLng([x, y]);

  // let t = formatTime(addHours(`${date.value} 00:00`, timeHour.value))
  // let t1 = formatTime(addHours(`${date.value} 00:00`, timeHour.value + 1))
  let tArr = [
    smInfo.dateShumo.slice(0, 4),
    smInfo.dateShumo.slice(4, 6),
    smInfo.dateShumo.slice(6, 8),
    smInfo.dateShumo.slice(8, 10),
  ];
  let t = `${tArr[0]}-${tArr[1]}-${tArr[2]} ${tArr[3]}:00`;
  t = formatTime(addHours(t, 0));
  let t1 = formatTime(addHours(t, 1));

  let typeArr = ["wave", "wind", "current"];
  let allP = [];

  typeArr.forEach((sType) => {
    allP.push(
      seriesQueriesNew(token, {
        ...smRange[sType],
        startDateTime: t,
        endDateTime: t1,
        featureType: sType,
        latitude: latlng.lat,
        longitude: latlng.lng,
      })
    );
  });

  Promise.all(allP).then((res) => {
    // TODO 应该是在这里加入判断，使得查询海流点击陆地时，三种查询结果均不显示

    const { activeShumo, dateShumo, liziData } = smInfo;

    console.log(res);

    if (activeShumo.title == "海流") {
      if (
        !res[2]?.data?.data?.currentDatas ||
        (res[2]?.data?.data?.currentDatas[0][0] == 0 &&
          res[2]?.data?.data?.currentDatas[0][1] == 0) ||
        res[2]?.data?.data?.currentDatas[0]?.length == 1
      ) {
        // popInfo3.waveHeight = "";
        // popInfo3.waveDirection = "";
        // popInfo3.windSpeed = "";
        // popInfo3.windDirection = "";
        // popInfo3.currentSpeed = "";
        // popInfo3.currentDirection = "";
        return;
      }
    }

    if (activeShumo.title == "海浪") {
      if (
        !res[0]?.data?.data?.waveDatas ||
        (res[0]?.data?.data?.waveDatas[0][0] == 0 &&
          res[0]?.data?.data?.waveDatas[0][1] == 0) ||
        res[0]?.data?.data?.waveDatas[0]?.length == 1
      ) {
        // popInfo3.waveHeight = "";
        // popInfo3.waveDirection = "";
        // popInfo3.windSpeed = "";
        // popInfo3.windDirection = "";
        // popInfo3.currentSpeed = "";
        // popInfo3.currentDirection = "";
        return;
      }
    }

    // 从新写一下空值的判断，前面的先不动，动了可能有副作用
    if (res[0]?.data?.data?.waveDatas && res[0]?.data?.data?.waveDatas[0]?.length > 1) {
      popInfo3.waveHeight = res[0]?.data?.data?.waveDatas[0][0];
      popInfo3.waveDirection = res[0]?.data?.data?.waveDatas[0][1] + " °";
    } else {
      popInfo3.waveHeight = "";
      popInfo3.waveDirection = "";
    }

    if (res[1]?.data?.data?.windDatas && res[1]?.data?.data?.windDatas[0]?.length > 1) {
      popInfo3.windSpeed = res[1]?.data?.data?.windDatas[0][0];
      popInfo3.windDirection = res[1]?.data?.data?.windDatas[0][1] + " °";
    } else {
      popInfo3.windSpeed = "";
      popInfo3.windDirection = "";
    }

    if (res[2]?.data?.data?.currentDatas && res[2]?.data?.data?.currentDatas[0]?.length > 1) {
      popInfo3.currentSpeed = res[2]?.data?.data?.currentDatas[0][0];
      popInfo3.currentDirection = res[2]?.data?.data?.currentDatas[0][1] + " °";
    } else {
      popInfo3.currentSpeed = "";
      popInfo3.currentDirection = "";
    }

    // popInfo3.waveHeight = res[0]?.data?.data?.waveDatas[0][0];
    // popInfo3.waveDirection = res[0]?.data?.data?.waveDatas[0][1] + " °";
    // popInfo3.windSpeed = res[1]?.data?.data?.windDatas[0][0];
    // popInfo3.windDirection = res[1]?.data?.data?.windDatas[0][1] + " °";
    // popInfo3.currentSpeed = res[2]?.data?.data?.currentDatas[0][0];
    // popInfo3.currentDirection = res[2]?.data?.data?.currentDatas[0][1] + " °";
    popInfo.position = `${latlng.lat.toFixed(3)}N, ${latlng.lng.toFixed(3)}E`;

    chartInfo.lat = latlng.lat;
    chartInfo.lng = latlng.lng;

    if (name) {
      popInfo.name = name;
    }
    // 获取id pop_main的高度和宽度
    isPop.value = true;
    nextTick(() => {
      let popMain = document.getElementById("pop_main");
      let popMainWidth = popMain.offsetWidth;
      let popMainHeight = popMain.offsetHeight;
      style.left = x - popMainWidth / 2 + "px";
      style.top = y - popMainHeight - 10 + "px";
    });
  });
};

const handlePopClose = () => {
  isPop.value = false;
  chartInfo.isChart = false;
};

const activeTypeMap = {
  海风: "windDatas",
  海浪: "waveDatas",
  海流: "currentDatas",
};

const handleActiveType = (item) => {
  activeType.value = item;
  // handleChart()
  initSmChart();
};

const latlng = reactive({
  lat: 30.496,
  lng: 121.632,
});
const handleChart = () => {
  chartInfo.isChart = !chartInfo.isChart;
};

const initSmChart = () => {
  let featureType = shumoInfo.value.find(
    (item) => item.title == activeType.value
  ).type;
  let lat = popInfo.position.split(",")[0].slice(0, -1);
  let lon = popInfo.position.split(",")[1].slice(0, -1);
  let startDateTime = day3.startDateTime;
  let endDateTime = day3.endDateTime;

  let ncDirectory = bmInfo.value.find(
    (item) => item.name == bm.value
  ).ncDirectory;
  smPngInfo.pngPath = smPngInfo.pngPath + `\\${ncDirectory}\\${featureType}\\${smDate.value}\\${smPngInfo.pngPath}`
  // console.log({
  //   ...smPngInfo,
  //   startDateTime,
  //   endDateTime,
  //   featureType,
  //   latitude: lat,
  //   longitude: lon,
  // });

  seriesQueriesNew(
    // token,
    // featureType,
    // startDateTime,
    // endDateTime,
    // lat,
    // lon,
    // bm.value
    {
      ...smPngInfo,
      startDateTime,
      endDateTime,
      featureType,
      latitude: lat,
      longitude: lon,
    }
  ).then((res) => {
    let dataCopy = res.data.data[activeTypeMap[activeType.value]];
    // 去除dataCopy中的null
    dataCopy = dataCopy.filter((item) => item != null);
    if (dataCopy.length == 0) {
      ElMessage({
        message: "当前位置暂无数据",
        type: "warning",
      });
      return;
    }

    let dateStart = startDateTime;
    let data = dataCopy.map((item, idx) => {
      let dateNow = formatTime(addHours(new Date(dateStart), idx));
      return {
        time: dateNow,
        height: item[0],
        angle: item[1],
      };
    });
    if (isShowChart.value) {
      nextTick(() => {
        let myChart = echarts.init(document.getElementById("chart_main"));
        let option = {
          xAxis: {
            type: "category",
            data: data.map((item) => item.time),
            // 显示小时，只在跨越天数的时候显示日期
            axisLabel: {
              formatter: (value, index) => {
                return value.split(" ")[1];
              },
            },
          },
          yAxis: {
            type: "value",
            name: featureType == "wave" ? "m" : "m/s",
          },
          grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "10%",
          },
          dataZoom: [
            {
              type: "slider",
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 33,
              bottom: 10,
              height: 20,
              showDetail: false,
              showDataShadow: false,
              fillerColor: "rgba(167,183,204,0.4)",
              borderColor: "rgba(167,183,204,0.4)",
              backgroundColor: "rgba(167,183,204,0.4)",
              handleStyle: {
                color: "rgba(167,183,204,0.4)",
                borderColor: "rgba(167,183,204,0.4)",
              },
              textStyle: {
                color: "rgba(167,183,204,0.4)",
              },
            },
            {
              type: "inside",
              xAxisIndex: [0],
              start: 0,
              end: 100,
              zoomLock: true,
            },
          ],
          tooltip: {
            trigger: "axis",
            formatter: (params) => {
              let str = formatTime(params[0].name);
              let arr = str.split(" ")[0].split("-");
              let hour = str.split(" ")[1].split(":")[0];
              // let angle = activeType.value == '海流' ? data[params[0].dataIndex].angle : (360 - data[params[0].dataIndex].angle)
              let angle = data[params[0].dataIndex].angle;
              return (
                `${arr[0]}年${arr[1]}月${arr[2]}日 ${hour}时` +
                "<br />" +
                params[0].value +
                (activeType.value == "海流" ? "m/s" : "m") +
                "<br />" +
                getAngle(angle + " ") +
                "°"
              );
            },
          },
          series: [
            {
              data: data.map((item) => item.height),
              type: "line",
              showSymbol: true,
              smooth: true,
              showAllSymbol: true,
              // #F8AB5F 100%到0%透明度
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#B8E986",
                  },
                  {
                    offset: 1,
                    color: "#B8E98600",
                  },
                ]),
              },
              // 线的颜色
              lineStyle: {
                color: "#B8E986",
              },
              // // 点的颜色
              itemStyle: {
                label: {
                  show: true,
                },
              },
              // 点样式为箭头 方向根据角度
              symbol: `image://${lineCircle}`,
              symbolSize: 20,
              symbolOffset: [0, 0],
              symbolRotate: (_, all) => {
                return activeType.value == "海流1"
                  ? data[all.dataIndex].angle
                  : 360 - data[all.dataIndex].angle;
              },
            },
          ],
        };
        myChart.setOption(option);
      });
    }
  });
};

const handleSzChartClose = () => {
  isShowChart.value = false;
};

const isBofang = ref(false);

// 定义一个定时任务timeHour++
const timer = ref(null);

const handleBofang = () => {
  isBofang.value = !isBofang.value;
  if (isBofang.value) {
    timer.value = setInterval(() => {
      timeHour.value += 1;
      if (timeHour.value == 72) {
        timeHour.value = 0;
      }
    }, 2000);
  } else {
    clearInterval(timer.value);
  }
};

// 灾害警报
const activeTab = ref("海浪警报");
const alarmYear = ref();

const hisAlarms = reactive({
  海浪警报: [
    {
      date: "2023-06-11 10:28",
      value: "海浪蓝色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "海浪黄色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "海浪橙色警报",
    },
  ],
  风暴潮警报: [
    {
      date: "2023-06-11 10:28",
      value: "风暴潮蓝色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "风暴潮黄色警报",
    },
    {
      date: "2023-06-11 10:28",
      value: "风暴潮红色警报",
    },
  ],
});

let currentAlarm = ref([]);
let homeAlarm = ref([]);

const getAlarmColor = (value) => {
  if (value.includes("蓝色")) {
    return "#4A90E2";
  } else if (value.includes("黄色")) {
    return "#8F8839";
  } else if (value.includes("橙色")) {
    return "#F5A623";
  } else if (value.includes("红色")) {
    return "#D0021B";
  } else {
    // 绿色
    return "#7ED321";
  }
};

const currentTfPop = ref("");

let popMarker = null;
var pulsingIcon = L.icon.pulse({ iconSize: [8, 8], color: "red" });
watch(isPop, () => {
  // 开启监听地图的移动，窗口跟着移动
  if (isPop.value) {
    Config.mapObj.map.on("move", () => {
      let { x, y } = Config.mapObj.map.latLngToContainerPoint([
        popInfo.position.split(",")[0].slice(0, -1),
        popInfo.position.split(",")[1].slice(0, -1),
      ]);
      let popMain = document.getElementById("pop_main");
      let popMainWidth = popMain.offsetWidth;
      let popMainHeight = popMain.offsetHeight;
      style.left = x - popMainWidth / 2 + "px";
      style.top = y - popMainHeight - 10 + "px";
    });
  } else {
    Config.mapObj.map.off("move");
    if (popMarker) {
      Config.mapObj.map.removeLayer(popMarker);
    }
  }
});

watch(popInfo, () => {
  if (popMarker) {
    Config.mapObj.map.removeLayer(popMarker);
  }
  if (popInfo.name == "") {
    let p = popInfo.position.split(",");
    let lat = p[0].slice(0, -1);
    let lon = p[1].slice(0, -1);
    popMarker = L.marker([lat, lon], { icon: pulsingIcon }).addTo(
      Config.mapObj.map
    );
  }
});
// 拖拽部分
const pop_ref = ref(null);
let qs1 = null,
  qs2 = null,
  qs3 = null;
let qsTxt1 = null,
  qsTxt2 = null,
  qsTxt3 = null;
let qsjq = [
  {
    name: "1号",
    marker: null,
    text: null,
    position: [30.469, 120.991],
  },
  {
    name: "3号",
    marker: null,
    text: null,
    position: [30.431, 120.997],
  },
  {
    name: "2号",
    marker: null,
    text: null,
    position: [30.385, 120.966],
  },
];

let pntLayers = [];
const add123 = (nv) => {

  // 先清除之前的
  pntLayers.forEach((item) => {
    Config.mapObj.map.removeLayer(item);
  });
  searchAllPnt(token).then(res => {
    let bmData = bmInfo.value.find((item) => item.name == bm.value);
    let pnts = bmData.pntIds.split(",");

    // if (bmName.value != '秦山') {
    // if (!bmName.value.includes('秦山')) {
    let pntsData = res.data.data.filter((item) => pnts.includes(item.pntId + ""));
    //  
    qsjq = pntsData.map((item) => {
      return {
        name: item.name,
        marker: null,
        text: null,
        position: [item.lat, item.lon],
      };
    });
    // } else {
    if (bmName.value.includes('秦山')) {
      //  
      qsjq = [
        {
          name: "1号",
          marker: null,
          text: null,
          position: [30.469, 120.991],
        },
        {
          name: "3号",
          marker: null,
          text: null,
          position: [30.431, 120.997],
        },
        {
          name: "2号",
          marker: null,
          text: null,
          position: [30.385, 120.966],
        },
      ];
    }

    //  
    qsjq.forEach((item) => {
      // 先清除之前的
      let icon = L.icon({
        iconUrl: "./img/location.png",
        iconSize: [22, 22],
        className: "qinshan-icon",
      });
      let marker = L.marker(item.position, { icon: icon }).addTo(
        Config.mapObj.map
      );
      let textIcon = L.divIcon({
        className: "qinshan-text",
        html: item.name,
        iconAnchor: [-10, 8],
      });

      marker.on("click", (e) => click123(e, item.name));
      let text = L.marker(item.position, { icon: textIcon }).addTo(
        Config.mapObj.map
      );
      pntLayers.push(marker, text);

    });
    // 注册一个点击事件
    let arr123 = document.getElementsByClassName("qinshan-icon");
    for (let i = 0; i < arr123.length; i++) {
      arr123[i].addEventListener("click", (e) => {
        click123(e, qsjq[i]);
        e.stopPropagation();
      });
    }
  })

};

const click123 = (e, point) => {
  let pointPosition = Config.mapObj.map.latLngToContainerPoint(point.position);
  handleMapSz(
    {
      x: pointPosition.x,
      y: pointPosition.y,
    },
    point.name
  );
};

const scroll_Table = ref(null);
let currentTableIdx = 0;

// 获取一个日期下一天的日期
const addDays = (date, days) => {
  let d = new Date(date);
  d.setDate(d.getDate() + days);
  // 格式为yyyy-mm-dd
  return d.toISOString().split("T")[0];
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.date == formatTime(new Date()).slice(5, 10)) {
    if (!currentTableIdx) {
      currentTableIdx = rowIndex;
    }
    return "current-row";
  }
  return "";
};

const loginOut = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  router.push("/login");
};

const getLinearGradient = (data) => {
  let str = "linear-gradient(to right,";
  data.forEach((item, idx) => {
    str += item.color + " ";
    if (idx != data.length - 1) {
      str += ",";
    }
  });
  str += ")";
  return str;
};

let allP = [];

watch(bm, () => {
  let ncDirectory = bmInfo.value?.find(
    (item) => item.name == bm.value
  ).ncDirectory;
  for (let key in smRange) {
    smRange[key] = {}
  }
  allP = [];

  let typeArr = ["wave", "wind", "current"];
  let bmId = bmInfo.value.find((item) => item.name == bm.value)?.id;
  typeArr.forEach((sType) => {
    allP.push(
      getNewNumberForecastByTypeAndDepart(token, {
        type: sType,
        departId: bmId,
      })
    );
  });

  Promise.all(allP).then(resArr => {
    resArr.forEach(res => {
      if (res.data.code == 200 && res.data.data) {
        let data = res.data.data

        let { range, pngRange, resolutionRatio, path } = data;
        range = JSON.parse(range);
        pngRange = JSON.parse(pngRange);
        resolutionRatio = JSON.parse(resolutionRatio);
        // 因为bug而活
        smRange[data.type] = {
          scale_lon: resolutionRatio.x_r,
          scale_lat: resolutionRatio.y_r,
          scale: resolutionRatio.y_r,
          startLat: range.maxLat,
          endLat: range.minLat,
          startLon: range.minLon,
          endLon: range.maxLon,
          maxLat: range.maxLat,
          minLat: range.minLat,
          maxLon: range.maxLon,
          minLon: range.minLon,
          width: pngRange.width,
          height: pngRange.height,
          precision: resolutionRatio.x_r,
          parentDirectory: ncDirectory,
          pngName: path.split('\\')[path.split('\\').length - 1]
        }
      }
    })
  })

}, {
  immediate: true
})
// handleselect
watch(
  [smInfo, bm],
  async () => {

    let bmId = bmInfo.value.find((item) => item.name == bm.value)?.id;

    let smT = smMap[smInfo.activeShumo?.title];
    if (smInfo.activeShumo) {
      getViewByTypeAndDepartId(token, {
        type: smT,
        departId: bmId,
      }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let dataJson = JSON.parse(data.value);
          Config.mapObj.map.setView([dataJson.lat, dataJson.lon], dataJson.zoom);
        }
      })
    } else {
      getViewByTypeAndDepartId(token, {
        type: 'default',
        departId: bmId,
      }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let dataJson = JSON.parse(data.value);
          Config.mapObj.map.setView([dataJson.lat, dataJson.lon], dataJson.zoom);
        }
      })
    }
    await Promise.all(allP)


    // 获取范围
    // let bmId = bmInfo.value.find((item) => item.name == bm.value)?.id;

    let rangeParams = {

    };
    let pngName = "";

    const { activeShumo, dateShumo, liziData } = smInfo;

    let isLizi = liziData.find((item) => item.title == "粒子法").isShow;
    let isJiantou = liziData.find((item) => item.title == "箭头法").isShow;
    let isShuzhi = liziData.find((item) => item.title == "数值法").isShow;

    let t = dateShumo;

    if (!activeShumo?.title) {
      if (lastShumo) {
        removeForecastLayer();
        removeForecastLayerL();
      }
      isPop.value = false;
      isShowLegend.value = false;
      return;
    } else if (lastShumo != activeShumo?.title) {
      removeForecastLayer();
      removeForecastLayerL();
      isPop.value = false;
    }
    isPop.value = false;
    chartInfo.isChart = false;
    lastShumo = activeShumo?.title;
    if (activeShumo?.title == "海风") {
      let windData = {
        label: "10米风",
        common: getLayerObj(t, smRange['wind'], pngName).wind,
        attribute: {
          png: "wind_G_full.png",
          type: "wind_speed",
          calRegion: false,
          showLand: true,
          showLabel: isShuzhi,
        },
      };
      addForecastLayer(windData);
      removeForecastLayerL();
      if (isLizi || isJiantou) {
        if (isLizi) {
          let windData = {
            label: "10米风",
            common: getLayerObj(t, smRange['wind'], pngName).wind,
            attribute: {
              png: "wind_G_full.png",
              type: "wind",
              calRegion: false,
              showLand: true,
              showParticle: true,
            },
          };
          addForecastLayer(windData);
        }
        if (isJiantou) {
          let windData = {
            label: "10米风",
            common: getLayerObj(t, smRange['wind'], pngName).wind,
            attribute: {
              png: "wind_G_full.png",
              type: "wind",
              calRegion: false,
              showLand: true,
              showArrow: false,
              showFeather: isJiantou,
            },
          };
          addForecastLayer(windData);
        }
      }
    }
    if (activeShumo?.title == "海浪") {
      let waveData = {
        label: "海浪",
        common: getLayerObj(t, smRange['wave'], pngName).wave,
        attribute: {
          png: "wave_G_full.png",
          type: "wave_height",
          calRegion: false,
          showLand: false,
          showLabel: isShuzhi,
        },
      };
      addForecastLayer(waveData);
      removeForecastLayerL();
      if (isLizi || isJiantou) {
        if (isLizi) {
          let waveData = {
            label: "海浪",
            common: getLayerObj(t, smRange['wave'], pngName).wave,
            attribute: {
              // png: "wave_G_full.png",
              type: "wave",
              calRegion: false,
              showLand: true,
              showParticle: true,
            },
          };
          addForecastLayer(waveData);
        }
        if (isJiantou) {
          let waveData = {
            label: "海浪",
            common: getLayerObj(t, smRange['wave'], pngName).wave,
            attribute: {
              png: "wave_G_full.png",
              type: "wave",
              calRegion: false,
              showLand: true,
              showArrow: false,
              showFeather: isJiantou,
            },
          };
          addForecastLayer(waveData);
        }
      }
    }
    if (activeShumo?.title == "海流") {
      let currentData = {
        label: "海流",
        common: getLayerObj(t, smRange['current'], pngName).cuerent,
        attribute: {
          png: "current_G_full.png",
          type: "current_speed",
          calRegion: false,
          showLand: false,
          showLabel: isShuzhi,
        },
      };
      addForecastLayer(currentData);
      removeForecastLayerL();
      if (isLizi || isJiantou) {
        if (isLizi) {
          let currentData = {
            label: "海流",
            common: getLayerObj(t, smRange['current'], pngName).cuerent,
            attribute: {
              png: "current_G_full.png",
              type: "current",
              calRegion: false,
              showLand: true,
              showParticle: true,
            },
          };
          addForecastLayer(currentData);
        }
        if (isJiantou) {
          let currentData = {
            label: "海流",
            common: getLayerObj(t, smRange['current'], pngName).cuerent,
            attribute: {
              png: "current_G_full.png",
              type: "current",
              calRegion: false,
              showLand: true,
              showArrow: isJiantou,
              // showArrow: false,
              // showFeather: isJiantou,
            },
          };
          addForecastLayer(currentData);
        }
      }
    }

    // 显示图例
    let legendArr = [];
    if (activeShumo?.title == "海风") {
      if (!boundaryLineLayer1) {
        // 加载海风时的边界线
        boundaryLineLayer1 = L.tileLayer.wms(
          "https://geomap.oceanread.com:5812/geoserver/world_boundary/wms?",
          {
            layers: "world_boundary:world_vector_forWMP1",
            format: "image/png",
            transparent: true,
            pane: "overlayPane",
            zIndex: Config.layerIndex.boundaryLine,
          }
        );
        boundaryLineLayer1.addTo(Config.mapObj.map);
      }

      legendArr.push({
        value: "m/s",
        color: Config.scalarColor.wind_speed[0].color,
      });
      let length =
        Config.scalarColor.wind_speed.length > 20
          ? 19
          : Config.scalarColor.wind_speed.length;
      for (let i = 0; i < length; i = i + 2) {
        const ele = Config.scalarColor.wind_speed[i];
        legendArr.push(ele);
      }

      legendArrData.value = legendArr;
    }
    if (activeShumo?.title == "海浪") {
      legendArr.push({
        value: "m",
        color: Config.scalarColor.wave[0].color,
      });
      let length =
        Config.scalarColor.wave.length > 16
          ? 15
          : Config.scalarColor.wave.length;
      for (let i = 1; i < length; i = i + 2) {
        const element = Config.scalarColor.wave[i];
        legendArr.push(element);
      }

      legendArrData.value = legendArr;
    }
    if (activeShumo?.title == "海流") {
      legendArr.push({
        value: "m/s",
        color: Config.scalarColor.current_speed[0].color,
      });

      let length =
        Config.scalarColor.current_speed.length > 15
          ? 14
          : Config.scalarColor.current_speed.length;
      for (let i = 0; i < length; i = i + 2) {
        const element = Config.scalarColor.current_speed[i];
        legendArr.push(element);
      }

      legendArrData.value = legendArr;
    }
    isShowLegend.value = true;
  },
  {
    // immediate: true,
    deep: true,
  }
);

const smMap = {
  海风: "wind",
  海浪: "wave",
  海流: "current",
}

watch(
  bm,
  () => {
    activeMenu.value = null;
    let bmId = bmInfo.value?.find((item) => item.name == bm.value)?.id;
    // 潮位站点图标
    //  
    add123();

    // 切换视角
    let smT = smMap[smInfo.activeShumo?.title];
    if (smInfo.activeShumo) {
      getViewByTypeAndDepartId(token, {
        type: smT,
        departId: bmId,
      }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let dataJson = JSON.parse(data.value);
          Config.mapObj.map.setView([dataJson.lat, dataJson.lon], dataJson.zoom);
        }
      })
    } else {
      getViewByTypeAndDepartId(token, {
        type: 'default',
        departId: bmId,
      }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          let dataJson = JSON.parse(data.value);
          Config.mapObj.map.setView([dataJson.lat, dataJson.lon], dataJson.zoom);
        }
      })
    }

    // getAllDepartment(token).then((res) => {
    //   if (res.data.code == 200) {
    //     let data = res.data.data;
    //     console.log(data);
    //     let d = data.find((item) => item.id == bmId);
    //     if (d) {
    //       waveValue.value = d.waveValue;
    //       tideValue.value = d.tideValue;
    //       systemTitle.value = d.title;
    //     }
    //   }
    // });
    let d = bmInfo.value.find((item) => item.name == bm.value);
    waveValue.value = d.waveValue;
    tideValue.value = d.tideValue;
    systemTitle.value = d.title;
  },
  {
    immediate: true,
  }
);

const getPopDate = computed(() => {
  if (!smInfo.dateShumo) return "";
  let month = smInfo.dateShumo.slice(4, 6);
  let day = smInfo.dateShumo.slice(6, 8);
  let hour = smInfo.dateShumo.slice(8, 10);
  // return `${month}月${day}日 ${hour}时`
  // 时间往后推8小时
  let date = formatTime(
    addHours(`${smInfo.dateShumo.slice(0, 4)}-${month}-${day} ${hour}:00`, 8)
  );
  let month1 = date.split(" ")[0].split("-")[1];
  let day1 = date.split(" ")[0].split("-")[2];
  let hour1 = date.split(" ")[1].split(":")[0];
  return `${month1}月${day1}日 ${hour1}时`;
});

const isClick = ref(false);

// watch([seaAreaActive, activeNv], () => {
//     if (!Config?.mapObj?.map) return
//     for (let key in areaLines) {
//         if (areaLines[key].arc) {
//             Config.mapObj.map.removeLayer(areaLines[key].arc)
//             areaLines[key].arc = null
//         }
//         if (areaLines[key].line) {
//             Config.mapObj.map.removeLayer(areaLines[key].line)
//             areaLines[key].lin`e = null
//         }
//     }
//     if (activeNv.value == '综合预报') {
//         if (!areaLines.area1.arc) {
//             areaLines.area1.arc = L.polyline(linesData.lines1, {
//                 color: seaAreaActive.value == 0 ? '#F5A623' : 'black',
//                 weight: seaAreaActive.value == 0 ? 3 : 1,
//                 pane: 'pane1',
//             }).addTo(Config.mapObj.map)
//         }
//         if (!areaLines.area1.line) {
//             areaLines.area1.line = L.polyline([[30.422335935664595, 120.94423155357681], [30.511227886318157, 120.96042252070848]], {
//                 color: seaAreaActive.value == 0 ? '#F5A623' : 'black',
//                 weight: seaAreaActive.value == 0 ? 3 : 1,
//                 pane: 'pane1',
//             }).addTo(Config.mapObj.map)
//         }
//         if (!areaLines.area2.arc) {
//             areaLines.area2.arc = L.polyline(linesData.lines2, {
//                 color: seaAreaActive.value == 1 ? '#F5A623' : 'black',
//                 weight: seaAreaActive.value == 1 ? 3 : 1,
//                 pane: 'pane1',
//             }).addTo(Config.mapObj.map)
//         }
//         if (!areaLines.area2.line) {
//             areaLines.area2.line = L.polyline([[30.422335935664595, 120.94423155357681], [30.340901500942653, 120.90016339689983]], {
//                 color: seaAreaActive.value == 1 ? '#F5A623' : 'black',
//                 weight: seaAreaActive.value == 1 ? 3 : 1,
//                 pane: 'pane1',
//             }).addTo(Config.mapObj.map)
//         }

//     }
// }, {
//     immediate: true
// })

watch(activeMenu, () => {
  if (activeMenu.value?.title == "潮位预报") {
    // if (!tideStation) {
    //   tideStation = L.marker([30.44677, 120.952438], { icon: tideIcon }).addTo(
    //     Config.mapObj.map
    //   );
    // }
    // initTideIcon();
  } else {
    // if (tideStation) {
    //   Config.mapObj.map.removeLayer(tideStation);
    //   tideStation = null;
    // }
    // tideLayers.forEach((item) => {
    //   Config.mapObj.map.removeLayer(item);
    // });
  }
});
</script>

<template>
  <div id="home">
    <section id="map" @click="handleMapSz" @mousedown="isClick = true" @mousemove="isClick = false"></section>
    <!-- 图例 -->
    <div id="scalarlegend" v-show="isShowLegend" :style="{
      background: getLinearGradient(legendArrData),
    }">
      <div v-for="(item, index) in legendArrData" :key="index" class="legend-item"
        :style="{ color: item.fontcolor ? item.fontcolor : '#FFFFFF' }">
        {{ item.value }}
      </div>
    </div>

    <section id="sz" v-if="activeNv == '数值预报'">
      <!-- 有两部分，一部分是时间条，另一部分是时序曲线 -->
      <div v-if="isShowChart" style="height: 350px">
        <img src="../assets/img/下拉.png" alt="" @click="handleSzChartClose" />
        <div id="header">
          时间：{{ getChDate(day3.startDateTime) }} -
          {{ getChDate(day3.endDateTime) }}
        </div>
        <div style="
            display: flex;
            height: 36px;
            background-color: #f4f7fd;
            border-radius: 18px 18px 18px 18px;
            align-items: center;
            justify-content: space-around;
            margin: 5px 12px;
          ">
          <div class="sz_t" v-for="item in ['海风', '海浪', '海流']" @click="handleActiveType(item)" :style="{
            color: activeType == item ? '#FFFFFF' : '',
            backgroundColor: activeType == item ? '#006FFA' : '',
          }">
            {{ item }}
          </div>
        </div>
        <div id="chart_main"></div>
      </div>
      <div v-else>
        <img :src="isBofang ? iconZanting : iconBofang" alt="" style="
            position: absolute;
            left: 20px;
            height: 30px;
            width: 30px;
            top: -5px;
          " @click="handleBofang" />
        <a-slider v-model:value="timeHour" :marks="marks" :max="72" :tooltipOpen="true" :tipFormatter="tipFormatter"
          style="margin: 10px 30px; height: 30px; margin-left: 50px">
          <template #mark="{ label, point }">
            <template v-if="point === 72">
              <strong>{{ label }}</strong>
            </template>
            <template v-else>{{ label }}</template>
          </template>
        </a-slider>
      </div>
    </section>
    <section id="cx" v-else-if="activeNv == '潮位预报'">
      <div id="header">
        <!-- 日期选择器 -->
        <div style="font-size: 16px; font-family: 'aliph400'">
          <!-- 当前日期： -->
          {{ getDqDate() }}
        </div>
        <el-select v-model="station" placeholder="请选择" size="" style="width: 110px">
          <el-option v-for="item in stations" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div id="chart_main" v-if="station == '1'"></div>
      <div id="table_main" v-else>
        <el-table ref="scroll_Table" :data="tableData" style="width: 100%; margin: 10px 0px; height: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column prop="date" label="日期" align="center" width="80" />
          <el-table-column label="高潮" align="center">
            <el-table-column prop="timeHigh" label="潮时" align="center" width="70" />
            <el-table-column prop="tideHigh" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideHigh > warningValue ? 'red' : '' }">
                  {{ row.tideHigh }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="低潮" align="center">
            <el-table-column prop="timeLow" label="潮时" align="center" width="70" />
            <el-table-column prop="tideLow" label="潮位(cm)" align="center">
              <template #default="{ row }">
                <div :style="{ color: row.tideLow > warningValue ? 'red' : '' }">
                  {{ row.tideLow }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </section>
    <section id="zhai" v-else-if="activeNv == '灾害警报'">
      <div style="
          display: flex;
          height: 46px;
          background-color: #f4f7fd;
          border-radius: 18px 18px 18px 18px;
          align-items: center;
          justify-content: space-around;
          margin: 12px 12px;
          width: calc(100% - 24px);
        ">
        <div class="zhai_t" v-for="item in ['海浪警报', '风暴潮警报']" @click="activeTab = item" :style="{
          color: activeTab == item ? '#FFFFFF' : '',
          backgroundColor: activeTab == item ? '#006FFA' : '',
        }">
          {{ item }}
          <img v-if="
            homeAlarm.filter((v) =>
              v.value.includes(item == '海浪警报' ? '海浪' : '风暴潮')
            ).length > 0
          " :src="iconGantan" alt="" style="position: absolute; right: 15px; height: 15px" />
        </div>
      </div>
      <template v-if="currentAlarm.length == 0">
        <img class="zhai_no_img" :src="activeTab == '海浪警报' ? iconWaveNo : iconFbcNo" alt="" />
        <div class="zhai_no_txt">当前无{{ activeTab }}</div>
      </template>
      <template v-else>
        <div class="zhai_his">
          <div style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              width: 100%;
            ">
            <div style="font-family: 'aliph500'; font-size: 18px">当前警报</div>
          </div>

          <div v-for="item in currentAlarm" class="his_item">
            <div class="his_time">{{ item.date }}</div>
            <div class="his_value" :style="{ color: getAlarmColor(item.value) }">
              {{ item.value }}
            </div>
            <a :href="item.url" target="_blank">查看</a>
          </div>
        </div>
      </template>

      <div class="zhai_his">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
          ">
          <div style="font-family: 'aliph500'; font-size: 18px">历史警报</div>
          <el-select v-model="alarmYear" placeholder="请选择" size="" style="width: 95px">
            <el-option v-for="item in alarmYears" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div v-for="item in hisAlarms[activeTab]" class="his_item">
          <div class="his_time">{{ getChDate1(item.date) }}</div>
          <div class="his_value" :style="{ color: getAlarmColor(item.value) }">
            {{ item.value }}
          </div>
          <a :href="item.url" target="_blank">查看</a>
        </div>
      </div>
    </section>
    <section id="tf" v-else></section>
    <!-- 数值预报的弹窗 -->
    <div ref="pop_ref" id="pop" style="position: fixed" :style="style" v-show="isPop">
      <div id="pop_main">
        <div id="header">
          <div class="header_item">
            <img id="h_jw" src="../assets/img/icon-经纬度.png" alt="" />
            <div>
              {{ popInfo.name != "" ? popInfo.name : popInfo.position }}
            </div>
            <img id="h_close" src="../assets/img/icon-关闭.png" alt="" @click="handlePopClose" />
          </div>
          <div class="header_item">
            <img id="h_jw_t" src="../assets/img/时间.png" alt="" />

            <div>{{ getPopDate }}</div>
          </div>
        </div>
        <div id="main">
          <el-row v-show="popInfo3.windSpeed && popInfo3.windDirection"
            :class="{ activeSm: smInfo.activeShumo?.title == '海风' }">
            <el-col :span="5">海风:</el-col>
            <el-col :span="9">{{ popInfo3.windSpeed }} m/s</el-col>
            <el-col :span="6">{{
              getAngle(popInfo3.windDirection, "海风正")
            }}</el-col>
          </el-row>
          <el-row v-show="popInfo3.waveHeight && popInfo3.waveDirection"
            :class="{ activeSm: smInfo.activeShumo?.title == '海浪' }">
            <el-col :span="5">海浪:</el-col>
            <el-col :span="9">{{ popInfo3.waveHeight }} m</el-col>
            <el-col :span="6">{{
              getAngle(popInfo3.waveDirection, "海浪")
            }}</el-col>
          </el-row>

          <el-row v-show="popInfo3.currentSpeed && popInfo3.currentDirection"
            :class="{ activeSm: smInfo.activeShumo?.title == '海流' }">
            <el-col :span="5">海流:</el-col>
            <el-col :span="9">{{ popInfo3.currentSpeed }} m/s</el-col>
            <el-col :span="6">{{
              getAngle(popInfo3.currentDirection, "海流")
            }}</el-col>
          </el-row>
        </div>
        <img id="chart_img" src="../assets/img/图表.png" alt="" @click="handleChart" />
      </div>

      <div id="red_p"></div>
    </div>

    <!-- 数模的类型和方向 -->
    <div id="title">
      <span> {{ systemTitle }} </span>
    </div>
    <!-- 选择部门 -->
    <div id="bm" v-if="bmInfo.length > 1">
      <div v-for="item in bmInfo.filter(v => v.name != '预报中心')" class="bm_i" :class="{ active: item.name == bm }"
        @click="handleBm(item)">
        {{ item.name }}
      </div>
    </div>

    <FloatPopCom />
    <JbPop />
    <TimeStep v-show="isShowLegend" />
    <Menu />
    <KaiGuan v-if="isShowLegend" />
    <ZonghePop v-if="activeMenu?.title == '综合预报'" />
    <ChaoxiPop v-if="activeMenu?.title == '潮位预报'" />
    <TyphoonForecast :map="Config.mapObj.map" v-if="activeMenu?.title == '台风路径'" />
    <Tools />
    <ChartPop />

    <div id="sm_info" v-if="smInfo.activeShumo">
      <div id="t">
        {{ smInfo.activeShumo?.title }}
      </div>
      <div id="d">
        {{ formatTime(addHours(formatTime(smInfo.dateShumo), 8)) }}

      </div>
    </div>
    <img id="bg_img" src="../assets/img/bg.png" alt="">
    <div id="sth">GS(2017)508号 数据来源:国家地理信息公共服务平台</div>
  </div>
</template>

<style lang="less" scoped>
#home {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  #bg_img {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 65px;
    user-select: none;
    // 不可拖动
    pointer-events: none;

  }

  #sm_info {
    position: fixed;
    left: 50%;
    top: 65px;
    transform: translateX(-50%);
    z-index: 999;
    height: 45px;
    width: 200px;
    background-color: #6097FA;
    border-radius: 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // background-color: #8495AE;
    opacity: 0.9;

    #t {
      font-family: "aliph500";
      font-size: 18px;
      color: #ffffff;
      // background-color: #535F6E;
      // background-color: #0070fa;
      border-radius: 20px;
      width: 55px;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #d {
      font-family: "aliph400";
      font-size: 14px;
      color: #ffffff;
    }
  }

  :deep(.el-select__wrapper) {
    background: #fafafa;
    border-radius: 6px;
    border: 0px solid #e6e6e6;
  }

  :deep(.el-select__selected-item) {
    span {
      font-family: "aliph400";
      color: #2e2e33;
    }
  }

  :deep(.el-input__inner) {
    font-family: "aliph400";
    color: #2e2e33;
  }

  #map {
    flex: 1;
    width: 100%;
  }

  #menu_pop {
    // background-color: #F0F2F5;
    background: #ffffff;
    padding: 15px;
    display: flex;
    flex-direction: column;

    // opacity: 0.8;
    .menu_pop_item {
      // height: 100px;
      // background-color: #ffffff;
      // margin: 10px;
      // border-radius: 6px;
      // opacity: 1;
      // padding: 15px;
      padding-top: 25px;

      .menu_pop_title {
        font-family: "aliph500";
        font-size: 16px;
        color: #2e2e33;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        padding-bottom: 12px;

        img {
          margin-right: 10px;
        }
      }

      .menu_pop_main {
        // display: flex;
        // flex-direction: column;
        padding-top: 20px;

        // .nv_i {
        //     width: 50%;
        //     height: 32px;
        //     display: flex;
        //     // justify-content: center;
        //     align-items: center;
        //     font-size: 14px;
        //     font-family: 'aliph500';
        //     font-weight: 500;
        //     color: #1A1A1A;
        //     cursor: pointer;
        //     transition: background 0.3s, color 0.3s;

        //     &.active {
        //         background: #266DF1;
        //         color: #FFFFFF;
        //         border-radius: 20px;
        //     }
        // }
      }

      #dhcd {
        // 3行2列 grid布局
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 12px;

        .dhcd_i {
          padding: 15px 0px;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fafafa;
          border-radius: 3px;
          border: 0px solid #e6e6e6;
          font-family: "aliph400";

          &.active {
            background: rgba(0, 112, 250, 0.1);
            border: 1px solid #0070fa;
            color: #0070fa;
          }
        }
      }

      #szyb {
        display: flex;
        justify-content: space-between;

        .shumo_in {
          font-size: 14px;
          font-family: "aliph400";
          color: #5c5c66;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }

      #kgsz {
        display: flex;
        flex-direction: column;

        .kgsz_i {
          padding-bottom: 15px;
          font-size: 14px;
          font-family: "aliph400";
          color: #5c5c66;
          display: flex;
          align-items: center;
        }
      }
    }

    #loginOut {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "aliph400";
      font-size: 14px;
      color: #0070fa;
      cursor: pointer;
      width: 100%;
      text-align: center;
      background: #fafafa;
      border-radius: 18px;
      border: 0px solid #e6e6e6;
      padding: 10px 0;
      margin-top: auto;
      margin-bottom: 20px;
    }

    #user_info {
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-left: 12px;
      margin-top: 12px;
    }
  }

  #map_tools {
    background: #ffffff;
    position: absolute;
    margin: 10px;
    right: 0;
    z-index: 999;
    top: 50px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // align-items: center;

    width: 35px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(95, 95, 95, 0.2),
      0 2px 4px 0 rgba(95, 95, 95, 0.19);
    box-shadow: 0 2px 4px 0 rgba(95, 95, 95, 0.2),
      0 2px 4px 0 rgba(95, 95, 95, 0.19);
    border-radius: 3px;
    text-align: center;
    opacity: 0.9;

    .tool {
      margin-top: 4px;

      // display: flex;
      // flex-direction: column;
      // align-items: center;
      .btn-text {
        font-size: 12px;
        margin-top: -5px;
        color: rgba(0, 0, 0, 0.8);
      }

      .ttt {
        &::after {
          position: absolute;
          content: "";
          width: 30px;
          height: 1px;
          bottom: -5px;
          left: 5px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        }
      }

      img {
        height: 20px;
        width: 20px;
      }
    }
  }

  #map_lizi {
    margin: 10px;
    z-index: 999;
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 正方形

    .lizi_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      box-shadow: 0px 0 3px 0px #e6e6e6;
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 10px;
      padding: 5px;
      // 宽和高一样
      width: 50px;
      height: 50px;

      img {
        height: 18px;
      }

      div {
        font-family: "aliph400";
        font-size: 12px;
        color: #666666;
      }
    }
  }

  #pop {
    position: fixed;
    z-index: 999;

    #pop_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      width: 210px;
      box-shadow: 0px 0px 3px 0px #e6e6e6;
      border-radius: 6px;

      #header {
        height: 45px;
        width: 100%;
        background: #f2f7fe;
        border-radius: 5px 5px 0px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // align-items: center;
        padding: 0 10px;
        // 阴影

        .header_item {
          width: 100%;
          display: flex;
          align-items: center;
          line-height: 20px;
          color: #266df1;
        }

        #h_jw {
          height: 12px;
          margin-right: 10px;
        }

        #h_jw_t {
          height: 13px;
          margin-right: 10px;
        }

        #h_close {
          height: 13px;
          margin-left: auto;
          margin-right: 6px;
          cursor: pointer;
        }

        div {
          font-family: "aliph500";
          font-weight: 500;
          font-size: 14px;
        }
      }

      #main {
        height: calc(100% - 28px);
        padding: 5px 10px;
        font-size: 14px;
        font-family: "aliph400";
        color: #1a1a1a;
      }

      #chart_img {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 30px;
        margin: 5px;
        cursor: pointer;
      }

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateY(50%) translateX(-50%);
        // border-top: 10px solid transparent;
        // border-bottom: 10px solid transparent;
        // border-left: 15px solid #000;
        // 向下的三角形
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #ffffff;

        /* Arrow color */
        margin-top: -2px;
        /* Adjust arrow position */
      }
    }
  }

  #shumo {
    position: absolute;
    left: 0;
    z-index: 998;

    .shumo_i {
      background: #0a1935;
      box-shadow: 0px 0px 3px 0px #172f4e;
      border-radius: 12px;
      opacity: 0.65;
      width: 66px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4px 12px;
      transition: background 0.2s;

      img {
        height: 14px;
        margin-right: 4px;
      }

      div {
        font-family: "aliph400";
        font-size: 14px;
        color: #ffffff;
      }
    }
  }

  #zh {
    width: 100%;
    background: url("../assets/img/底-bg.png");
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;

    #header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 14px;
      }

      span {
        font-family: "aliph500";
        font-weight: 500;
        font-size: 16px;
        color: #292933;
        padding: 0 28px;
      }
    }

    #day {
      margin: 0 12px;
      height: 94px;
      background: #f8f8f8;
      border-radius: 9px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 12px;

      .day_item {
        display: flex;
        align-items: center;

        img {
          height: 14px;
          margin-right: 7px;
        }

        .t {
          margin-right: 7px;
          font-size: 14px;
          font-family: "aliph400";
          color: #292933;
        }

        .v {
          font-size: 14px;
          font-family: "aliph400";
          color: #666666;
        }
      }
    }

    #hour {
      margin: 12px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;

      .hour_item {
        // 需要腾出来24px的间隙，三个平分8px
        width: calc(33.33% - 8px);
        height: 100%;
        background: url("../assets/img/底.png");
        background-size: 100% 150px;
        // 不重复
        background-repeat: no-repeat;
        background-color: #ffffff;
        border-radius: 9px;

        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        .hour_title {
          font-family: "aliph500";
          font-weight: 500;
          font-size: 14px;
          color: #266df1;
          position: absolute;
          top: 0px;
          left: 50%;
          transform: translateX(-50%);
        }

        .wind_angle {
          display: flex;
          // justify-content: center;
          // justify-content: space-between;
          align-items: center;
          padding: 0 12px;

          img {
            height: 20px;
          }

          div {
            font-family: "aliph500";
            font-weight: 500;
            font-size: 14px;
            color: #266df1;
            margin-left: 8px;

            .t {
              font-family: "aliph500";
              font-weight: 500;
              font-size: 12px;
              color: #292933;
            }

            .v {
              font-family: "aliph400";
              font-weight: 400;
              font-size: 12px;
              color: #666666;
            }
          }
        }
      }
    }

    #day_3 {
      margin: 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .day_item {
        display: flex;
        flex-direction: column;

        .day_h {
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #b0c5ef;
          height: 40px;
          font-family: "aliph500";
          font-size: 14px;
          color: #292933;
          line-height: 14px;
          font-style: normal;
          text-transform: none;
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .img_t {
            height: 14px;
            margin-left: 15px;
            margin-right: 8px;
          }

          .img_x {
            height: 14px;
            margin-left: auto;
            margin-right: 18px;
          }
        }

        .day_m {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .m_i {
            width: calc(33.33% - 8px);
            // height: 140px;
            background: #f4f7fd;
            border-radius: 9px 9px 9px 9px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;

            // img {
            //     height: 20px;
            //     width: 20px;
            //     margin-bottom: 7px;
            // }

            .fff {

              // flex: 1;
              .ttt {
                font-family: "aliph400";
                font-size: 12px;
                color: #737380;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .vvv {
                font-family: "aliph500";
                font-size: 14px;
                color: #31313e;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }

            .hour_header {
              display: flex;
              align-items: center;
              margin-bottom: 7px;

              img {
                height: 20px;
                width: 20px;
                margin-right: 7px;
              }

              span {
                font-family: "aliph500";
                font-size: 14px;
                color: #31313e;
              }
            }
          }
        }
      }
    }
  }

  #sz {
    width: 100%;
    background: #ffffff;
    position: absolute;
    bottom: 0px;
    // height: 50px;
    left: 0;
    z-index: 999;
    border-radius: 15px 15px 0px 0px;

    .sz_t {
      font-family: "aliph500";
      font-weight: 500;
      font-size: 14px;
      color: #292933;
      border-radius: 18px 18px 18px 18px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      transition: background 0.3s, color 0.3s;
    }

    img {
      height: 15px;
      width: 30px;
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
    }

    #header {
      height: 36px;
      background: #f5f5f5;
      border-radius: 6px;
      margin: 16px 12px 0 12px;
      font-size: 12px;
      font-family: "aliph400";
      color: #292933;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #chart_main {
      width: 100%;
      height: 248px;
    }
  }

  #cx {
    width: 100%;
    background: #ffffff;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 999;
    border-radius: 15px 15px 0px 0px;

    img {
      height: 15px;
      width: 30px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    #header {
      height: 36px;
      // background: #F5F5F5;
      border-radius: 6px;
      margin: 16px 12px 0 12px;
      font-size: 12px;
      font-family: "aliph400";
      color: #292933;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #chart_main {
      width: 100%;
      height: 248px;
    }

    #table_main {
      width: 100%;
      height: calc(100vh - 72px - 36px - 30px);
    }
  }

  #zhai {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    // padding-bottom: 72px;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    background-color: #fafafa;
    width: 100%;
    padding-top: 33px;

    .zhai_no_img {
      width: 50%;
      margin: 10px;
    }

    .zhai_no_txt {
      font-size: 24px;
      color: #666;
      opacity: 0.6;
      letter-spacing: 4px;
      font-family: "aliph500";
      width: calc(100% - 24px);
      text-align: center;
      padding-bottom: 10px;
    }

    .zhai_his {
      width: calc(100% - 24px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f0f2f5;
      margin: 5px 12px;
      border-radius: 9px;
      overflow: auto;

      .his_item {
        display: flex;
        padding: 10px;
        width: 100%;
        font-size: 16px;
        font-family: "aliph400";
        justify-content: space-between;

        // .his_time {
        //   // margin-right: 20px;
        // }
      }
    }

    .zhai_t {
      font-family: "aliph500";
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 0.5px;
      color: #292933;
      border-radius: 18px 18px 18px 18px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      transition: background 0.3s, color 0.3s;
    }
  }

  // #tf {
  //     height: calc(100vh - 72px);
  //     z-index: 999;
  // }

  #jb_home {
    position: fixed;
    left: 0;
    top: 70px;
    // 右边圆角
    z-index: 999;

    .jb_home_item {
      // background-color: #266DF1;
      border-radius: 0px 10px 10px 0px;
      // height: 40px;
      // width: 120px;
      padding: 7px 0;
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .jb_title {
        color: #ffffff;
        font-family: "aliph400";
        font-size: 16px;
        margin-left: 10px;
      }

      img {
        height: 25px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }

  #nv {
    width: 100%;
    background: #ffffff;
    // box-shadow: 0px -1px 6px 0px rgba(204, 204, 204, 0.29);
    box-shadow: 1px 0 6px 0px #cccccc;
    z-index: 99999;

    #nv_in {
      height: 41px;
      margin: 12px;
      margin-bottom: 20px;
      background: #f2f6fc;
      border-radius: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 6px;

      .nv_i {
        width: 25%;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: "aliph500";
        font-weight: 500;
        color: #1a1a1a;
        cursor: pointer;
        transition: background 0.3s, color 0.3s;

        &.active {
          background: #266df1;
          color: #ffffff;
          border-radius: 20px;
        }
      }
    }
  }

  #scalar {
    position: fixed;
    // bottom: 500px;
    top: 0;
    left: 0;
    margin: 12px;
    z-index: 999;
    width: 200px;
    height: 25px;
    background: linear-gradient(to right,
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(98, 113, 184),
        rgb(61, 110, 163),
        rgb(74, 148, 170),
        rgb(74, 146, 148),
        rgb(77, 142, 124),
        rgb(76, 164, 76),
        rgb(103, 164, 54),
        rgb(162, 135, 64),
        rgb(162, 109, 92),
        rgb(141, 63, 92),
        rgb(151, 75, 145),
        rgb(95, 100, 160),
        rgb(91, 136, 161),
        rgb(91, 136, 161));
  }

  #sth {
    position: fixed;
    bottom: 1px;
    right: 10px;
    z-index: 998;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 14px;
    font-family: "aliph400";
    color: #666666;
  }

  #tftl {
    position: fixed;
    right: 0;
    bottom: 500px;
    margin: 12px;
    z-index: 999;

    img {
      height: 25px;
    }

    .tftl_i {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      padding: 1px 5px;
      background-color: #ffffff;
      margin-bottom: 7px;
      border-radius: 7px;
    }
  }

  #title {
    position: fixed;
    // top: 35px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    // 背景 阴影
    // background: #266df1;
    // opacity: 0.9;
    // box-shadow: 0px 0px 3px 0px #e6e6e6;
    // border-radius: 20px;
    // padding: 18px 20px;
    // display: flex;
    // align-items: center;
    // justify-content: center;

    span {
      font-family: "deyi";
      // font-size: 35px; 
      font-size: 4vmin;
      // color: #ffffff;
      color: #266df1;
      text-shadow: 0px 0px 2px #266df1;
      // text-shadow: 3px 3px 5px #266df1;
      user-select: none;
    }
  }
}

#scalarlegend {
  position: absolute;
  z-index: 405;
  bottom: 85px;
  right: 10px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 320px;
  padding: 0 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);

  .legend-item {
    color: #ffffff;
    flex: 1;
    height: 25px;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#bm {
  position: fixed;
  right: 10px;
  bottom: 120px;
  z-index: 999;
  background-color: #266df1;
  // width: 320px;
  max-width: 320px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  border-bottom: 2px solid transparent;

  .bm_i {
    flex-shrink: 0;
    padding: 5px 5px;
    color: #ffffff;
    font-size: 14px;
    font-family: "aliph500";
    margin: 5px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    user-select: none;
    white-space: nowrap;

    &.active {
      color: #f5a60b;
      border-radius: 20px;
      border-bottom: 2px solid #f5a60b;
    }
  }
}
</style>
